            
                <section class="row">
                    <div class="col-12">
                        <div>
                            <h1>Masked Form Elements</h1>
                        </div>
                        <div>
                            <ol class="breadcrumb">
                                <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                                <li>Forms</li>
                                <li class="active">Masked Form Elements</li>
                            </ol>
                        </div>
                    </div>
                </section>

            <div class="ajax-container">
                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Masked Form Elements with Validation</h3>
                            </div>
                            <div class="panel-body form-container">
                                <form id="masked-validation" method="post" action="<?= base_url() ?>forms/validate" class="form-bordered form-horizontal form-validate">
                                    <fieldset>
                                        <legend>Masked Form Validations</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="time" class="control-label col-3">
                                                    Time *
                                                    <br><small>(99:99 pm)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                                                            <input type="text" name="time" id="time" class="form-control" placeholder="12:30 AM">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="slash-date" class="control-label col-3">
                                                    Date *
                                                    <br><small>(99/99/9999)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
                                                            <input type="text" name="slash-date" id="slash-date" class="form-control" placeholder="03/14/1989">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="dash-date" class="control-label col-3">
                                                    Date *
                                                    <br><small>(99-99-9999)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
                                                            <input type="text" name="dash-date" id="dash-date" class="form-control" placeholder="03-14-1989">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="datetime" class="control-label col-3">
                                                    Datetime *
                                                    <br><small>(99/99/9999 99:99 pm)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
                                                            <input type="text" name="datetime" id="datetime" class="form-control" placeholder="03/14/1989 12:30 AM">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="hex" class="control-label col-3">
                                                    Hex *
                                                    <br><small>(#hhhhhh)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                            <input type="text" name="hex" id="hex" class="form-control" placeholder="#ffffff">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="product-key" class="control-label col-3">
                                                    Product Key *
                                                    <br><small>(****-****-****-****)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-key"></i></span>
                                                            <input type="text" name="product-key" id="product-key" class="form-control" placeholder="5F23-66F8-82GW-K0H6">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    <div class="submit-group col-12 align-right">
                                        <input name="submit" class="btn btn-primary" value="Submit" type="submit">
                                        <input name="cancel" class="btn btn-default" value="Cancel" type="button">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- page-script -->
                <script src="<?= base_url() ?>js/scripts/form-masked.js"></script>
            </div>